<template>
  <div class="card-content" :style="cardStyle">
    <div class="card" v-for="(item, index) in dataList" :key="index">
      <div class="card-item" v-if="isShowItem(item)" :style="item.style">
        <img
          class="img"
          v-if="item.src"
          :src="item.src"
          :style="item.textStyle"
          @click="imgClick(item, index)"
        />
        <div class="text-unit" @click="textClick(item, index)">
          <div v-if="item.text" :style="item.textStyle">
            {{ item.text }}
          </div>
          <div class="unit" v-if="item.unit" :style="item.unitStyle">
            {{ item.unit }}
          </div>
        </div>
        <div
          class="des"
          v-if="item.des"
          :style="item.desStyle"
          @click="desClick(item, index)"
        >
          {{ item.des }}
        </div>
      </div>
      <div
        v-if="item.type === 'line'"
        class="verticalLine"
        :style="item.lineStyle"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CardView",
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    cardStyle: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      dataList: this.list,
    };
  },
  methods: {
    isShowItem(item) {
      if (item && (item.text || item.src)) {
        return true;
      }
      return false;
    },
    imgClick(item, index) {
      this.$emit("imgClick", item, index);
    },
    textClick(item, index) {
      this.$emit("textClick", item, index);
    },
    desClick(item, index) {
      this.$emit("desClick", item, index);
    },
  },
};
</script>

<style lang="less" >
.card-content:first-child {
  margin: 10px 16px;
}

.card-content {
  height: 88px;
  background: var(--bg_contrast);
  border-radius: 16px;
  display: flex;
  align-items: center;
  margin: 12px;
  justify-content: space-between;
  padding: 0 16px;
  .card {
    display: flex;
    justify-content: space-around;
    align-items: center;
    .card-item {
      display: flex;
      flex-direction: column;
    }
  }
  .verticalLine {
    background-color: var(--textColorTertiary);
    height: 24px;
    width: 1px;
  }
  .text-unit {
    display: flex;
    justify-content: center;
    align-items: baseline;
  }
  .unit {
    font-size: 12px;
  }
  .des {
    font-size: 12px;
    color: green;
    text-align: center;
  }
  .text {
    font-size: 18px;
    color: var(--textColorPrimary);
  }
  .img {
    width: 48px;
    height: 48px;
  }
}
</style>
